<template>
    <el-dialog title="编辑" :visible.sync="dialogForm" width="1100px">
        <el-form :inline="true" :model="form" ref="form" class="search-form" :rules="isBatch?noRules:rules" label-width="100px">
            <el-row v-if="!isBatch">
                <el-col :span="8">
                    <el-form-item label="箱号：" prop="containerNo">
                        <el-input v-model="form.containerNo" @input="changeUp" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="提单号：">
                        <el-input v-model="form.billNumber" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱位：">
                        <el-input v-model="form.positionDesc" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱型：" prop="containerType">
                        <autoSearchEntrust v-model="form.containerType" :name="form.containerType"></autoSearchEntrust>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸：" prop="containerSize">
                        <autoSearchSize v-model="form.containerSize" :name="form.containerSize"></autoSearchSize>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="空重：" prop="ifHeavy">
                        <el-select v-model="form.ifHeavy" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val"
                                       :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="内外贸：" prop="tradeType">
                        <el-select v-model="form.tradeType" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val"
                                       :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="货名：">
                        <el-input v-model="form.cargoName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="货重(吨)：">
                        <el-input v-model="form.cargoWeight" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱主：">
                        <autoSearchCustom @select="v=>form.ownerId=v"
                                          @selectName="v=>form.ownerName=v"
                                          :name="form.ownerName"
                                          :isOwner="true"></autoSearchCustom>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="运输方式：">
                        <el-select v-model="form.transportMode" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTransportModeType" :key="key" :label="val"
                                       :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="车号：">
                        <el-input v-model="form.inCarNo" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="进出口：" prop="importAndExport">
                        <el-select v-model="form.importAndExport" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictImportAndExportTypeByIO" :key="key" :label="val"
                                       :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="收货人：">
                        <el-input v-model="form.receiver" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="收货人电话：">
                        <el-input v-model="form.receiverPhone" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="是否在港：" prop="ifPort">
                        <el-select v-model="form.ifPort" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTrueOrFalse" :key="key" :label="val"
                                       :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否在场：" prop="ifSpot">
                        <el-select v-model="form.ifSpot" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTrueOrFalse" :key="key" :label="val"
                                       :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">保 存</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import autoSearchEntrust from "@/components/autocomplete/autoSearchEntrust";
    import autoSearchSize from "@/components/autocomplete/autoSearchSize";
    import autoSearchCustom from "@/components/autocomplete/autoSearchCustom";
    import { editBatch, editSingle } from "@/api/containerType/containerType";

    export default {
        name: "editForm",
        components: {
            autoSearchCustom, autoSearchSize, autoSearchEntrust
        },
        data() {
            return {
                dialogForm: false,
                form: this.clearForm(),
                rules: {
                    containerNo: [{ required: true, message: '请输入箱号!', trigger: 'change' }],
                    containerType: [{ required: true, message: '请选择箱型!', trigger: 'change' }],
                    containerSize: [{ required: true, message: '请选择尺寸!', trigger: 'change' }],
                    tradeType: [{ required: true, message: '请选择内外贸!', trigger: 'change' }],
                    importAndExport: [{ required: true, message: '请选择进出口!', trigger: 'change' }],
                    ifPort: [{ required: true, message: '请选择!', trigger: 'change' }],
                    ifSpot: [{ required: true, message: '请选择!', trigger: 'change' }],
                },
                noRules:{},
                isBatch: false,
                list: []
            }
        },
        mounted() {

        },
        methods: {
            handleSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.isBatch ? this.batchForm() : this.singleForm()
                    } else {
                        this.$message({ message: '请检查表单!', type: 'error' })
                    }
                })
            },
            batchForm() {
                let list = []
                let form = this.$assist.copySearchConditions(this.form)
                for (let i = 0; i < this.list.length; i++) {
                    const el = this.list[i]
                    list.push({
                        id: el.id,
                        ...form
                    })
                }
                editBatch(list).then(res => {
                    this.$message({ message: '修改成功!', type: 'success' })
                    this.dialogForm = false
                    this.$emit('load')
                })
            },
            singleForm() {
                editSingle(this.form.id, this.form).then(res => {
                    this.$message({ message: '修改成功!', type: 'success' })
                    this.dialogForm = false
                    this.$emit('load')
                })
            },
            changeUp(v) {
                let a = v.toUpperCase();
                this.$nextTick(() => {
                    this.form["containerNo"] = a;
                });
            },
            clearForm() {
                return {
                    containerNo: '',
                    billNumber: '',
                    positionDesc: '',
                    containerType: '',
                    containerSize: '',
                    ifHeavy: '',
                    tradeType: '',
                    cargoName: '',
                    cargoWeight: '',
                    ownerId: '',
                    ownerName: '',
                    transportMode: '',
                    inCarNo: '',
                    importAndExport: '',
                    receiver: '',
                    receiverPhone: '',
                    ifPort: '',
                    ifSpot: '',
                }
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$parent.dialogFormEdit = false
                }
            }
        }
    }
</script>

<style scoped>

</style>
